<template>
  <!-- v-if="false" -->
  <div>
    <div v-if="router.currentRoute.value.fullPath != '/temp'" class="route">
      <div class="route_left">
        <el-tag
          v-for="(item, index) in routeList"
          :key="index"
          :type="isActive(item.fullPath) ? '' : 'info'"
          class="ml10"
          closable
          @close="closeTag(index)"
        >
          <router-link :to="item.fullPath">
            {{ item.title }}
          </router-link>
        </el-tag>
      </div>
      <div class="route_right">
        <el-dropdown size="mini" @command="handleTags">
          <el-button type="primary" size="small">
            标签选项<el-icon>
              <arrow-down />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="all">关闭所有</el-dropdown-item>
              <el-dropdown-item command="other">关闭其他</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import router from "@/router";
import { useRouteStore } from "../store/modules/router";
import { ArrowDown } from "@element-plus/icons-vue";
const storeRouteList = useRouteStore(); // 从pinia中取数据
let emit = defineEmits(["getbBreadList"]);
// 路由数据
const routeList = ref([]);
// 面包屑数据
const breadList = ref([]);
const isActive = (path: string): boolean => {
  return path === router.currentRoute.value.fullPath;
};
// 关闭标签
const handleTags = (command: string) => {
  command === "all" ? closeAll() : closeOther();
};
// 关闭所有
const closeAll = () => {
  routeList.value = [];
  storeRouteList.updateRouterList([]);
  router.push("/temp");
};
// 关闭其他
const closeOther = () => {
  let currentList = routeList.value.filter((ele) => {
    return ele.fullPath === router.currentRoute.value.fullPath;
  });
  routeList.value = currentList;
  storeRouteList.updateRouterList(currentList);
};
// tag上的删除图标
const closeTag = (index: number): void => {
  const delItem = routeList.value.splice(index, 1)[0]; // 获取当前的
  const item = routeList.value[index]
    ? routeList.value[index]
    : routeList.value[index - 1]; // 获取到下一个
  if (item) {
    // 有下一个
    delItem.fullPath === router.currentRoute.value.fullPath &&
      router.push(item.fullPath);
  } else {
    // 没有 去 home页面
    router.push("/temp");
  }
  storeRouteList.updateRouterList(routeList.value);
};
// 监听路由变化，更新面包屑 路由数据
watch(
  () => router.currentRoute.value,
  (newValue) => {
    // 更新路由数据之前， 先从pinia中拿数据
    routeList.value = storeRouteList.$state.routerList;
    // 处理路由数据
    let obj2 = {
      title: newValue.meta.title,
      fullPath: newValue.fullPath,
    };
    routeList.value.push(obj2);
    // 去重
    const obj = {};
    routeList.value = routeList.value.reduce((total, next) => {
      obj[next.title] ? "" : (obj[next.title] = true && total.push(next));
      return total;
    }, []);
    // 存在pinia中
    storeRouteList.updateRouterList(routeList.value);
    // 处理面包屑
    breadList.value = router.currentRoute.value.matched;
    // 子组件向父组件传值  传的是面包屑的数据
    emit("getbBreadList", breadList.value);
  },
  { immediate: true }
);
</script>
<style scoped>
.route {
  width: 100%;
  background-color: #fff;
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  height: 35px;
  margin-top: 5px;
  position: relative;
  border-radius: 2px;
  white-space: nowrap;
}
.route_left {
  width: 92%;
  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  overflow: auto;
}
.route_right {
  position: absolute;
  right: 0;
}
</style>

